// for slider
.app-image-slider {
  display: inline-block;
  position: relative;
  width: 100%;
  .app-image-slider-container {
      .main {
          overflow: hidden;
          position: absolute;
          height: 200px;
          width: 100%;
          .main-inner {
              width: 1760px;
              padding: 0px;
              height: 100%;
              /* word-wrap: normal;
              white-space: nowrap; */
              &.with-ng-main-pagination {
                  height: calc(100% - 30px);
              }
              .full-screen {
                  background: url('');
                  background-size: 40px 40px;
                  background-repeat: no-repeat;
                  position: absolute;
                  z-index: 8;
                  display: block;
                  height: 40px;
                  width: 40px;
                  top: 4px;
                  right: 8px;
                  opacity: 0.4;
                  transition: all 0.5s ease-in-out;
                  cursor: pointer;
                  /* background-position: center center; */
              }
              .img-div {
                  width: 205px;
                  height: 100%;
                  /* float: left; */
                  margin-right: 3px;
                  margin-left: 3px;
                  position: relative;
                  border-radius: 10px;
                  display: inline-block;
                  //background-image: linear-gradient(to right,rgba(0,0,0,0.04),rgba(0,0,0,.1),rgba(0,0,0,.15),rgba(0,0,0,.1),rgba(0,0,0,.04));
                  box-shadow: inset 0 0px 1px rgba(0,0,0,.24), 0 0 2px rgba(0,0,0,.12);
                  border-radius: 5px;
                  &.image-popup {
                      cursor: pointer;
                  }
                  img, video {
                      position: absolute;
                      top: 0px;
                      bottom: 0px;
                      margin: auto;
                      height: 100%;
                      width: 100%;
                      left: 0;
                      right: 0;
                      border-radius: 5px 5px 5px 5px;
                      &.ratio {
                          width: auto;
                          height: auto;
                          max-width: 100%;
                          max-height: 100%;
                      }
                  }
                  .youtube-icon {
                      background: url('');
                      background-size: 140px 80px;
                      background-repeat: no-repeat;
                      position: absolute;
                      z-index: 6;
                      display: block;
                      height: 100%;
                      width: 100%;
                      top: 0;
                      left: 0;
                      background-position: center center;
                  }
                  /* .youtube-icon:hover {
                      background: url('/assets/img/play-button.png');
                      background-size: 57px 55px;
                      background-repeat: no-repeat;
                      background-position: center center;
                  } */
                  .caption {
                      position: absolute;
                      bottom: 0;
                      padding: 5px;
                      color: rgb(255, 255, 255);
                      background-image: linear-gradient(to right,rgba(0,0,0,0.1),rgba(0,0,0,.25),rgba(0,0,0,.5),rgba(0,0,0,.25),rgba(0,0,0,.1));
                      width: 100%;
                      text-align: center;
                      box-sizing: border-box;
                      border-radius: 0px 0px 5px 5px;
                  }
              }
              &:hover {
                  .full-screen {
                      transition: all 0.5s ease-in-out;
                      opacity: 1;
                  }
              }
          }
          .next,
          .prev {
              position: absolute;
              right: 10px;
              top: 50%;
              background-color: #fff;
              border-radius: 50%;
              cursor: pointer;
              margin-top: -16px;
              outline: 0;
              width: 35px;
              height: 35px;
              font-size: 35px;
              line-height: 30px;
              z-index: 8;
              transition: all 0.5s ease-in-out;
              text-align: center;
              &:hover {
                  background-color: #d4cdcd;
                  background-position: -192px -415px;
              }
              &.disable {
                  color: #bbb;
                  background-color: #fff;
                  opacity: 0.5;
                  cursor: default;
              }
          }
          .prev {
              left: 10px;
              &:hover {
                  background-position: -194px -450px;
              }
          }
      }

      .ng-main-pagination {
          background-color: inherit;
          color: inherit;
          position: absolute;
          height: 30px;
          width: calc(100% - 6px);
          text-align: center;
          bottom: 0;
          font-size: 16px;
          line-height: 30px;
          border-radius: 0 0 5px 5px;
          margin: 0px 3px 0px 3px;
      }
  }
  .app-image-slider-error {
      height: 100%;
      position: relative;
      display: flex;
      justify-content: center;
      align-items: center;
      .app-image-slider-loader {
          background-image: url('');
          background-repeat: no-repeat;
          background-position: center center;
          background-size: 25px 25px;
          width: 25px;
          height: 25px;
      }
  }
}

@media (max-width: 1199px) {
  .app-image-slider {
      .app-image-slider-container {
          .main{
              .main-inner {
                  .img-div{
                      width: 170px;
                      max-width: 100%;
                  }
              }
          }
      }
  }
}

@media (max-width:991px) {
  .app-image-slider {
      .app-image-slider-container {
          .main {
              .main-inner {
                  .img-div {
                      width: 297px;
                      max-width: 100%;
                  }
              }
          }
      }
  }
}

@media (max-width:768px) {
  .app-image-slider {
      .app-image-slider-container {
          .main {
              .main-inner {
                  .img-div {
                      width: 247px;
                      max-width: 100%;
                  }
              }
          }
      }
  }
}

@media (max-width:576px) {
  .app-image-slider {
      .app-image-slider-container {
          .main {
              .main-inner {
                  .img-div {
                      width: 350px;
                      max-width: 100%;
                      /* img{
                          width: 280px;
                      } */
                  }
              }
          }
      }
  }
}

.ng-image-fullscreen-view {
  position: fixed;
  z-index: 1031;
  background-color: rgba(0, 0, 0, 0.6);
  width: 100%;
  height: 100%;
  top: 0px;
  overflow: hidden;
  -webkit-transition: all 0.5s ease-in-out;
  -moz-transition: all 0.5s ease-in-out;
  -o-transition: all 0.5s ease-in-out;
  transition: all 0.5s ease-in-out;
  left: 0;
  text-align: center;
  &.image-fullview-hide {
      display: none !important;
  }
  .lightbox-wrapper {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: #1f1f1f;
      transition: all 0.5s ease;
      display: flex;
      justify-content: center;
      align-items: center;
      &.ng-ligthbox-pagination {
          height: calc(100% - 30px);
      }
      .lightbox-div {
          width: 100%;
          height: 100%;
          border: 1px solid;
          border-color: rgba(0, 0, 0, 0.35);
          position: relative;
          overflow: hidden;
          .pre-loader {
              background-color: inherit;
              width: 100%;
              height: 100%;
              .mnml-spinner {
                  background-image: url('');
                  background-repeat: no-repeat;
                  background-position: center center;
                  width: 100%;
                  height: 100%;
              }
          }
          .lightbox-image-main {
              display: grid;
              grid-template-columns: repeat(6,1fr);
              grid-template-rows: 100%;
              grid-column-gap: 0px;
              height: 100%;
              .lightbox-image {
                  width: 1299px;
                  height: 100%;
                  position: relative;
                  .custom-image-main {
                      &.ng-fullimage-loading {
                          background-image: url('');
                          background-repeat: no-repeat;
                          background-position: center center;
                      }
                  }
                  &.app-image-slider-show {
                      opacity: 1;
                      display: block;
                  }
                  &.app-image-slider-hide {
                      opacity: 0;
                      display: none;
                  }
                  .custom-image-main {
                      width: 100%;
                      height: 100%;
                      img {
                          -webkit-transition: all 0.5s ease-in-out;
                          -moz-transition: all 0.5s ease-in-out;
                          -o-transition: all 0.5s ease-in-out;
                          transition: all 0.5s ease-in-out;
                          //opacity: 0;
                          width: auto;
                          height: auto;
                          max-height: 100%;
                          max-width: 100%;
                          position: absolute;
                          z-index: 11;
                          top: 0px;
                          bottom: 0px;
                          margin: auto;
                          left: 0px;
                          right: 0px;
                      }
                      iframe {
                          top: 0;
                          left: 0;
                          right: 0;
                          bottom: 0;
                          margin: auto;
                          width: 100%;
                          height: 100%;
                          border: 0;
                      }
                      video {
                          top: 0;
                          left: 0;
                          right: 0;
                          bottom: 0;
                          margin: auto;
                          width: 100%;
                          height: 100%;
                          border: 0;
                      }
                  }
              }
          }
          .caption {
              position: absolute;
              z-index: 11;
              top: 0px;
              margin: auto;
              padding: 5px;
              color: rgb(255, 255, 255);
              background-color: rgba(0, 0, 0, 0.35);
              max-width: 100%;
              left: 0px;
              right: 0px;
              &.show {
                  display: block;
              }
              &.hide {
                  display: none;
              }
          }
          .next,
          .prev {
              position: absolute;
              right: 10px;
              top: 50%;
              background-color: #fff;
              border-radius: 50%;
              cursor: pointer;
              margin-top: -16px;
              width: 38px;
              height: 38px;
              font-size: 35px;
              z-index: 12;
              line-height: 30px;
              outline: 0;
              color: #000;
              transition: all 0.3s ease-in-out;
              &:hover {
                  background-color: #d4cdcd;
              }
              &.disable {
                  color: #bbb;
                  background-color: #fff;
              }
          }
          .prev {
              left: 10px;
          }
      }
      .close {
          background-image: url('');
          background-repeat: no-repeat;
          background-position: center center;
          background-size: 32px;
          position: absolute;
          top: 10px;
          right: 10px;
          color: #000;
          background-color: #fff;
          padding: 0px 0px;
          opacity: 1;
          border-radius: 50%;
          height: 36px;
          width: 36px;
          z-index: 12;
          cursor: pointer;
          transition: all .2s ease;
          /* &:hover {
              transform: rotate(90deg);
              transform-origin: 50% 50%;
              -webkit-transform-origin: 50% 50%;
              -webkit-transform: rotate(90deg);
          } */
      }
      &.error-msg {
          background-image: none;
      }
  }
  .invalid-msg {
      color: #fff;
      font-size: 18px;
      position: absolute;
      top: 45%;
      left: 45%;
  }
  .popup-pagination {
      background-color: #1f1f1f;
      color: #fff;
      position: absolute;
      height: 30px;
      width: 100%;
      text-align: center;
      bottom: 0px;
      font-size: 16px;
      line-height: 30px;
  }
}

@media(max-width: 768px) {
  .ng-image-fullscreen-view {
      .lightbox-wrapper {
          width: 100%;
          height: 100%;
          &.error-msg {
              background-image: none;
          }
      }
  }
}
// for lightbox
/* .app-image-slider-lightbox {
  position: fixed;
  z-index: 1031;
  background-color: rgba(0, 0, 0, 0.6);
  width: 100%;
  height: 100%;
  top: 0px;
  overflow: hidden;
  -webkit-transition: all 0.5s ease-in-out;
  -moz-transition: all 0.5s ease-in-out;
  -o-transition: all 0.5s ease-in-out;
  transition: all 0.5s ease-in-out;
  left: 0;
  text-align: center;
  .lightbox-wrapper {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: #1f1f1f;
      transition: all 0.5s ease;
      display: flex;
      justify-content: center;
      align-items: center;
      &.ng-ligthbox-pagination {
          height: calc(100% - 30px);
      }
      .lightbox-div {
          width: 100%;
          height: 100%;
          border: 1px solid;
          border-color: rgba(0, 0, 0, 0.35);
          position: relative;
          overflow: hidden;
          background-image: url('');
          background-repeat: no-repeat;
          background-position: center center;
          .pre-loader {
              background-color: inherit;
          }
          .lightbox-image-main {
              height: 100%;
              .lightbox-image {
                  height: 100%;
                  .custom-image-main {
                      background-image: url('');
                      background-repeat: no-repeat;
                      background-position: center center;
                  }
                  &.ng-image-lightbox-show {
                      display: block;
                      transition: display 0.5s linear;
                  }
                  &.ng-image-lightbox-hide {
                      display: none;
                      transition: display 0.5s linear;
                  }
                  .custom-image-main {
                      width: 100%;
                      height: 100%;
                      img {
                          max-width: 100%;
                          max-height: 100% !important;
                          position: absolute;
                          z-index: 11;
                          top: 0px;
                          bottom: 0px;
                          margin: auto;
                          left: 0px;
                          right: 0px;
                      }
                      iframe {
                          top: 0;
                          left: 0;
                          right: 0;
                          bottom: 0;
                          margin: auto;
                          width: 100%;
                          height: 100%;
                          border: 0;
                      }
                      video {
                          top: 0;
                          left: 0;
                          right: 0;
                          bottom: 0;
                          margin: auto;
                          width: 100%;
                          height: 100%;
                          border: 0;
                      }
                  }
              }
          }
          .caption {
              position: absolute;
              z-index: 11;
              top: 0px;
              margin: auto;
              padding: 5px;
              color: rgb(255, 255, 255);
              background-color: rgba(0, 0, 0, 0.35);
              max-width: 100%;
              left: 0px;
              right: 0px;
          }
          .next,
          .prev {
              position: absolute;
              right: 10px;
              top: 50%;
              background-color: #fff;
              border-radius: 50%;
              cursor: pointer;
              margin-top: -16px;
              width: 38px;
              height: 38px;
              font-size: 35px;
              z-index: 12;
              line-height: 30px;
              outline: 0;
              color: #000;
              transition: all 0.3s ease-in-out;
              &:hover {
                  background-color: #d4cdcd;
              }
              &.disable {
                  color: #bbb;
                  background-color: #fff;
              }
          }
          .prev {
              left: 10px;
          }
      }
      .close {
          background-image: url('');
          background-repeat: no-repeat;
          background-position: center center;
          background-size: 32px;
          position: absolute;
          top: 10px;
          right: 10px;
          color: #000;
          background-color: #fff;
          padding: 0px 0px;
          opacity: 1;
          border-radius: 50%;
          height: 36px;
          width: 36px;
          z-index: 12;
          cursor: pointer;
          transition: all .2s ease;
      }
      &.error-msg {
          background-image: none;
      }
  }
  .invalid-msg {
      color: #fff;
      font-size: 18px;
      position: absolute;
      top: 45%;
      left: 45%;
  }
  .popup-pagination {
      background-color: #1f1f1f;
      color: #fff;
      position: absolute;
      height: 30px;
      width: 100%;
      text-align: center;
      bottom: 0px;
      font-size: 16px;
      line-height: 30px;
  }
}

@media(max-width: 768px) {
  .app-image-slider-lightbox {
      .lightbox-wrapper {
          width: 100%;
          height: 100%;
          &.error-msg {
              background-image: none;
          }
      }
  }
} */